<template>
  <el-row class="main">
    <el-col :span="12">
      <!-- <el-input type="textarea" v-model="source" /> -->
      <pre>{{ gitRevision }}</pre>
    </el-col>
    <el-col :span="previewSpans"
            class="preview">
      <!-- <vue-markdown class="markdown" :source="source" /> -->
      <el-input v-model="moduleName"
                placeholder="请输入服务名(basic,order,transport)"
                class="input-with-select">
        <el-button slot="append"
                   icon="el-icon-search"
                   @click="handleSearch()" />
      </el-input>
    </el-col>
  </el-row>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  components: {},
  data () {
    return { source: "", editable: true, moduleName: "basic" };
  },
  computed: {
    ...mapState({
      gitRevisions: (state) => state.version.gitRevisions
    }),
    previewSpans () {
      return this.editable ? 12 : 24;
    },
    gitRevision () {
      var gitRevision = this.gitRevisions[this.moduleName];
      if (gitRevision && gitRevision.build) {
        delete gitRevision.build;
      }
      return gitRevision;
    }
  },
  async created () { },
  methods: {
    ...mapActions({
      loadGitRevisions: "version/loadGitRevisions"
    }),
    handleSearch () {
      this.loadGitRevisions(this.moduleName);
    }
  }
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.main {
  width: 100%;
  height: 100%;
}
.el-col {
  height: 100%;
}
::v-deep .el-textarea {
  height: 100%;
}
::v-deep textarea {
  height: 100%;
}
.box-card {
  height: 100%;
}
.preview {
  background-color: var(--prev-bg-white);
  padding: 20px 12px;
}
</style>
